<template>
  <van-tree-select
    height="100%"
    :items="items"
    :main-active-index.sync="active"
    @click-nav="getdata(items[active].text)"
  >
    <template #content>
      <van-grid square column-num="2">
        <van-grid-item
          v-for="(item, index) in categoryName"
          :key="index"
          icon="photo-o"
          :text="item.brand"
          @click="getBrand(index)"
        />
      </van-grid>
    </template>
  </van-tree-select>
  
</template>

<script>
// import axios from "axios";
export default {
  name: "Select",
  data() {
    return {
      active: 0,
      items: [],
      categoryName: [],
      category: "",
      id: "",
      brand: "",
    };
  },
// 商品分类列表
  created() {
    this.$server.get("/api/pro/categorylist").then((res) => {
      var arr = res.data.data;
      var obj = {};
      for (const key in arr) {
        obj[key] = arr[key];
      }
      var newobj = Object.keys(obj).map((item) => ({ text: obj[item] }));
      this.items = newobj;
    });
  },
  // 商品分类品牌列表
  methods: {
    getdata(str) {
      console.log(str);
      this.category = str;
      this.$server
        .get("/api/pro/categorybrandlist", {
          params: {
            category: str,
          },
        })
        .then((res) => {
          this.categoryName = res.data.data;
        });
    },
    getBrand(idx) {
      // to='/Brand'
      // console.log(this.categoryName[idx].brand );
      this.brand = this.categoryName[idx].brand;
      this.$router.push(`/Brand?category=${this.category}&brand=${this.brand}`);
    },
  },
};
</script>

<style></style>
